<template>
  <div class="home">
    <div class="container">
      <div class="card">
        <div class="card-body">
          <router-link
            :class="'pk_button'"
            :to="{ name: 'pk_index' }"
            style="text-decoration: none"
          >
            <button id="myButton" @click="playSound">开始投票</button>
            <audio id="myAudio">
              <source
                src="../../assets/musics/UI按钮点击.mp3"
                type="audio/mp3"
              />
            </audio>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeView",
  components: {},
  methods: {
    playSound() {
      var audio = document.getElementById("myAudio");
      console.log("1");
      audio.play();
    },
  },
};
</script>

<style>
.card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 或者你想要的高度 */

  background-image: url("../../assets/images/ujn02.jpg");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}

.card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#myButton {
  width: 200px;
  height: 200px;
  border: none;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

#myButton:active {
  transform: translateY(4px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.button {
  background: radial-gradient(red, orange);
}
</style>
